import { Column, Group, Option } from '@/components/pro-panel/index.typing';
import { useNormalColumns } from './normal-columns';
import { usePolymerizationColumns } from './polymerization-columns';

/**
 * 聚合点分组
 */
const normalGroups: Group[] = [
  {
    key: 'basic',
    title: '基础设置',
    collapsed: true,
  },
  {
    key: 'effect',
    title: '效果设置',
    collapsed: true,
  },
  {
    key: 'followZoom',
    title: '跟随缩放',
    collapsed: false,
  },
  {
    key: 'followTransparent',
    title: '跟随透明',
    collapsed: false,
  },
];

const polymerizationGroups: Group[] = [
  {
    key: 'basic',
    title: '基础设置',
    collapsed: true,
  },
  {
    key: 'effect',
    title: '效果设置',
    collapsed: true,
  },
];

export function usePanelConfig() {
  const layerType = ref(1);

  const changeLayerType = (value: number) => {
    layerType.value = value;
  };
  const formData = ref({
    effectTab: '矢量',
  });

  const { normalColumns } = useNormalColumns(formData.value, changeLayerType);
  const { polymerizationColumns } = usePolymerizationColumns(changeLayerType);

  const groups = computed(() => {
    if (layerType.value === 1) {
      return normalGroups;
    }
    return polymerizationGroups;
  });

  const columns = computed(() => {
    if (layerType.value === 1) {
      return normalColumns.value;
    }
    return polymerizationColumns.value;
  });

  return {
    groups,
    columns,
    formData,
  };
}
